<template>
  <div class="user-login">
    <div class="login-false" v-if="!$store.state.isLogin">
      <img src="../../assets/image/用户头像.png" alt="请先登录" class="head-portrait">
      <p class="login-box">
        <span>欢迎光临</span><br>
        <span>请先<a href="JavaScript:;" @click="loginFlag = true">登陆/注册</a></span>
      </p>
    </div>
    <div class="login-true" v-else>
      <div @mouseenter="verify = true" @mouseleave="verify = false">
        <img :src="headPortrait"  class="head-portrait">
        <!-- 用户信息页组件 -->
        <info info v-show="verify" :exitLogin="exitLogin"></info>
      </div>
      <div class="login-box">
        <span>{{$store.state.userinfo.name}}</span>
        <div class="info" @click="information=true">
          <svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-xiaoxizhongxin'></use>
          </svg>
          <span>消息通知({{informsCount}})</span>
        </div>
      </div>
      <!-- 消息通知组件 -->
      <information-vue @informsCount="alerts" @off="information=false" v-show="information"></information-vue>
    </div>
    
    <!-- 登录框组件 -->
    <loginregister  @OffLogin="loginFlag=false" v-show="loginFlag"></loginregister>
  </div>
</template>

<script>
import Loginregister from '../login/LoginRegister.vue'
import Info from './info.vue'
import informationVue from '../info/information/information.vue'
export default {
  name: 'HeaderLog',

  data() {
    return {
      verify: false, //信息框的显示与隐藏
      loginFlag: false, //登录框显示隐藏
      information: false, //消息通知显示隐藏
      informsCount: 0, // 消息条数
    };
  },

  computed: {
    //返回用户头像
    headPortrait(){
      let picture = this.$store.state.userinfo.picture
      return picture ? picture + '?t=' + Math.random() : require('@/assets/image/用户头像.png')
    },
  },

  methods: {
    //退出登录
    exitLogin(){
      this.$api.exitLogin().then(res => {
        if(res == 1){
          this.$store.commit('exitLogin') 
          this.$store.dispatch('showHint',{
            title: '已退出',
            isFlag: true
          })
        }
      })
    },
    // 系统消息数量
    alerts(count){
      this.informsCount = count
    }
  },
  components: {
    Loginregister,
    Info,
    informationVue
  }
};
</script>

<style scoped>
.user-login{
  font-size: 0.8rem;
  position: relative;
}
.user-login .login-false,.login-true{
  display: flex;
  height: 80px;
  align-items: center;
}
.user-login .head-portrait{
  cursor: pointer;
  width: 66px;
  height: 66px;
  border-radius: 50%;
}
.user-login .login-box{
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.user-login .login-box a{
  color: gray;
  font-size: 1rem;
  transition: all .5s;
}
.user-login .login-box a:hover{
  color: red;
}
.login-box .info .icon{
  font-size: 1rem;
}
.login-box .info{
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: gray;
  position: relative;
  margin-top: 10px;
}
.login-box .info:hover > span{
  color: black;
}
</style>